<template>
  <div class="login">
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
    >
      <h3 class="title">大病理赔管理系统</h3>
      <el-form-item prop="userCode">
        <el-input
          v-model="loginForm.userCode"
          type="text"
          auto-complete="off"
          placeholder="账号"
          @blur.native.capture="getComList"
          @focus="clearComCode"
        >
          <svg-icon
            slot="prefix"
            icon-class="user"
            class="el-input__icon input-icon"
          />
        </el-input>
      </el-form-item>
      <el-form-item prop="passWord">
        <el-input
          v-model="loginForm.passWord"
          type="passWord"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon
            slot="prefix"
            icon-class="passWord"
            class="el-input__icon input-icon"
          />
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input
          size="small"
          @keyup.enter.native="handleLogin"
          v-model="loginForm.code"
          auto-complete="off"
          placeholder="请输入验证码"
        >
          <i slot="prefix" class="icon-yanzhengma yanzhengma" style=""></i>
          <template slot="append">
            <span
              @click="getCode"
              class="msg-text"
              :class="[{ display: msgKey }]"
              >{{ msgText }}</span
            >
          </template>
        </el-input>
      </el-form-item>
       <el-form-item prop="makeCom">
           
        <el-select
          placeholder="请选择登录机构"
          v-model="loginForm.makeCom"
          @change="changeCom(loginForm.makeCom)"
        >
           
          <el-option
            v-for="com in comList"
            :key="com.comCode"
            :label="com.comCName"
            :value="com.comCode"
          >
               
          </el-option>
        </el-select>
      </el-form-item>
      <el-checkbox
        v-model="loginForm.rememberMe"
        style="margin: 0px 0px 25px 0px"
        >记住密码</el-checkbox
      >
      <el-form-item style="width: 100%">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width: 100%"
          @click.native.prevent="handleLogin"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <div class="el-login-footer">
      <span>版权所有 © 永安财产保险股份有限公司</span>
      <!-- <span>版权所有 © 中科软科技股份有限公司</span> -->
    </div>
  </div>
</template>


<script>
const MSGINIT = "发送验证码";
const MSGSCUCCESS = "${time}秒后重发";
const MSGTIME = 60;
import { login, getCodeImg, getComList } from "@/api/login";
import Cookies from "js-cookie";

export default {
  name: "login",
  data() {
    return {
      loginForm: {
        userCode: "",
        passWord: "",
        rememberMe: false,
        makeCom: "",
        makeComName: "",
        code: "",
        uuid: "",
      },
      comList: [],
      msgText: MSGINIT,
      msgTime: MSGTIME,
      msgKey: false,
      loginRules: {
        userCode: [
          { required: true, trigger: "blur", message: "用户名不能为空" }
        ],
        passWord: [
          { required: true, trigger: "blur", message: "密码不能为空" },
        ],
        code: [{ required: true, trigger: "blur", message: "验证码不能为空" }],
        makeCom: [
          { required: true, trigger: "blur", message: "登录机构不能为空" }
        ],
      },
      loading: false,
      redirect: undefined,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {
    this.getCookie();
  },
  methods: {
    changeCom(comCode) {
      this.comList.forEach((v, i) => {
        if (comCode == v.comCode) {
          this.loginForm.makeComName = v.comCName;
        }
      });
    },
    //向企业微信发送验证码方法
    getCode() {
      if (this.msgKey) return;
      this.msgText = MSGSCUCCESS.replace("${time}", this.msgTime);
      this.msgKey = true;
      const time = setInterval(() => {
        this.msgTime--;
        this.msgText = MSGSCUCCESS.replace("${time}", this.msgTime);
        if (this.msgTime === 0) {
          this.msgTime = MSGTIME;
          this.msgText = MSGINIT;
          this.msgKey = false;
          clearInterval(time);
        }
      }, 1000);
      getCodeImg(this.loginForm)
        .then((res) => {
          this.loginForm.code = "";
          if (res.data.data !== "0000") {
            this.msgText = MSGINIT;
            this.msgKey = false;
            clearInterval(time);
            this.$message.error(`验证码推送到企业微信失败，请核对工号权限`);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getCookie() {
      const userCode = Cookies.get("userCode");
      const passWord = Cookies.get("passWord");
      const rememberMe = Cookies.get("rememberMe");
      this.loginForm = {
        userCode: userCode === undefined ? this.loginForm.userCode : userCode,
        passWord: passWord === undefined ? this.loginForm.passWord : passWord,
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
      };
      if (userCode !== undefined && userCode !== "") {
        this.getComList(userCode);
      }
    },
    //登录方法
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        const user = {
          userCode: this.loginForm.userCode,
          passWord: this.loginForm.passWord,
          rememberMe: this.loginForm.rememberMe,
          makeCom: this.loginForm.makeCom,
          makeComName: this.loginForm.makeComName,
          code: this.loginForm.code,
          uuid: this.loginForm.uuid,
        };
        if (valid) {
          this.loading = true;
          if (user.rememberMe) {
            Cookies.set("userCode", user.userCode, { expires: 30 });
            Cookies.set("passWord", user.passWord, { expires: 30 });
            Cookies.set("rememberMe", user.rememberMe, { expires: 30 });
          } else {
            Cookies.remove("userCode");
            Cookies.remove("passWord");
            Cookies.remove("rememberMe");
          }
          this.$store
            .dispatch("Login", user)
            .then((res) => {
              this.loading = false;
              if (res.data.resultCode !== "0000") {
                this.$message.error(res.data.resultMsg);
              } else {
                this.$router.push({
                  path: this.redirect || "/dashboard/dashboard",
                });
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    //获取用户登陆机构
    getComList() {
      this.comList = [];
      if (this.loginForm.userCode != null && this.loginForm.userCode != "") {
        getComList(this.loginForm.userCode)
          .then((res) => {
            if (res.data.resultCode === "0000") {
              if (res.data.loginComList != null) {
                this.comList = res.data.loginComList[0].companyList;
              } else {
                this.loginForm.comCode = "";
              }
            } else {
              this.loginForm.comCode = "";
              this.$message.error(`未获取到登陆机构信息，请重新核对`);
            }
          })
          .catch(() => {
            this.loginForm.comCode = "";
            this.loading = false;
          });
      }
    },
    //清空登录机构方法
    clearComCode() {
      this.comList = [];
    },
  },
};
</script>


<style rel="stylesheet/scss" lang="scss">
.login {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  background-image: url("../../assets/images/top_images/login.png");
  background-size: cover !important;
}
.title {
  margin: 0px auto 30px auto !important;
  text-align: center !important;
  color: #707070 !important;
}

.login-form {
  border-radius: 6px !important;
  width: 400px !important;
  padding: 25px 25px 5px 25px !important;
  position: fixed !important;
  background-color: #ffffff !important;
  .el-input {
    height: 38px !important;
    input {
      height: 38px !important;
    }
  }
  .input-icon {
    height: 39px !important;
    width: 14px !important;
    margin-left: 2px !important;
  }
}
.login-tip {
  font-size: 13px !important;
  text-align: center !important;
  color: #bfbfbf !important;
}
.el-login-footer {
  height: 40px !important;
  line-height: 40px !important;
  position: fixed !important;
  bottom: 0 !important;
  width: 40% !important;
  text-align: center;
  color: #fff !important;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.msg-text {
  display: block !important;
  width: 60px !important;
  font-size: 12px !important;
  text-align: center !important;
  cursor: pointer !important;
}
.msg-text.display {
  color: #ccc !important;
}
.el-form-item {
  margin-bottom: 20px !important;
}
</style>
